<template>
  <div class="ps_board">
    <el-row>
      <el-col>
        <ps-header :showDecoration5="false" :updateTime="updateTime" />
      </el-col>
    </el-row>
    <div class="board-content">
      <div class="board-content-main">
        <salesBoard9 key="salesBoard9"></salesBoard9>
      </div>
      <div class="board-content-sub">
        <div class="sub-item-small">
          <salesBoard10 :key="key"></salesBoard10>
        </div>
        <div class="sub-item-big">
          <salesBoard11 class="ps_pd_l_10" :key="key"></salesBoard11>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="visualPannel">
import salesBoard10 from "@/views/visual/modules/salesBoard10.vue";
import salesBoard9 from "@/views/visual/modules/salesBoard9.vue";
import salesBoard11 from "@/views/visual/modules/salesBoard11.vue";
import moment from "moment";

const updateTime = ref("");
const timer = ref();
const key = ref(0);
const map = ref("china");
const time = ref(300);

// 自动更新时间五分钟
const updateData = () => {
  timer.value = setInterval(() => {
    if (time.value > 0) {
      time.value--;
      const duration = moment.duration(time.value * 1000); // 转换为毫秒

      const minutes = duration.asMinutes(); // 总分钟数（包含小数部分）
      const wholeMinutes = Math.floor(minutes); // 取整得到分钟数
      const remainingSeconds = Math.round((minutes - wholeMinutes) * 60); // 计算剩余的秒数
      updateTime.value = `${wholeMinutes}分${remainingSeconds}秒`;
    } else {
      time.value = 300;
      key.value++;
    }
  }, 1000);
};

const chooseMap = (val) => {
  map.value = val;
};
onMounted(updateData);
onUnmounted(() => {
  timer.value && clearInterval(timer.value);
});
</script>

<style scoped lang="scss">
.board-content {
  height: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &-main {
    width: 100%;
    height: 55%;

    display: flex;
    justify-content: space-between;

    .main-item-small {
      width: 24%;
      overflow: hidden;
    }

    .main-item-big {
      width: 50%;
      overflow: hidden;
    }
  }

  &-sub {
    height: 43%;
    display: flex;
    justify-content: space-between;

    .sub-item-small {
      width: 24%;
      overflow: hidden;
    }

    .sub-item-big {
      width: 75%;
      overflow: hidden;
    }
  }
}
</style>
